
import './index.less'
import React, { useState } from 'react';
import { Sidebar, Toast } from 'react-vant';
import { history } from 'umi';

export default function Cast(props) {


  const [active, setActive] = useState(0);
  const [list, setlist] = useState({
    fruit: [
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2640.png',
        title: '瓜类',
        cate:1
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2644.png',
        title: '葡提浆果',
        cate:2
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2648.png',
        title: '桃李杏仁',
        cate:3
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2653.png',
        title: '热带水果',
        cate:4
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2657.png',
        title: '苹果梨蕉',
        cate:5
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2661.png',
        title: '柑橘柚橙',
        cate:6
      }

    ],
    vegetable: [
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2682.png',
        title: '叶菜类'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2665.png',
        title: '根茎类'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2669.png',
        title: '先菌菇'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2673.png',
        title: '茄果瓜类'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2677.png',
        title: '葱姜蒜椒'
      },
      // {
      //   img:'',
      //   title:''
      // },

    ],
    seafood: [
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2686.png',
        title: '鱼类'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2691.png',
        title: '贝类'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2695.png',
        title: '虾类'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2699.png',
        title: '蟹类'
      },
      // {
      //   img:'',
      //   title:''
      // },
      // {
      //   img:'',
      //   title:''
      // },
    ],
    egg: [
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2703.png',
        title: '猪肉'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2707.png',
        title: '牛肉'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2711.png',
        title: '羊肉'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2715.png',
        title: '鸡'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2723.png',
        title: '鸭'
      },
      {
        img: 'https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%88%86%E7%B1%BB/u2720.png',
        title: '蛋类'
      },
    ]
  })



  return (
    <div className='cast'>


      {/* 头部 */}
      <div className='top'>
        分类
      </div>


      {/* 内容 */}
      <div className='con'>

        <Sidebar
          value={active}
          onChange={(v) => {
            setActive(v);

          }}
        >
          <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="水果">

            <div className='con_cate'>

              {
                list.fruit.map((ele, index) => {
                  return <div key={index} onClick={()=>{
                    history.push('/z_fenlei',{obj:ele})
                  }}>
                    <div className='con_cate_top'>
                      <img src={ele.img} />
                    </div>
                    <div>
                      {ele.title}
                    </div>
                  </div>
                })
              }


            </div>

          </Sidebar.Item>

          <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="蔬菜">

            <div className='con_cate'>

              {
                list.vegetable.map((ele, index) => {
                  return <div key={index}>
                    <div className='con_cate_top'>
                      <img src={ele.img} />
                    </div>
                    <div>
                      {ele.title}
                    </div>
                  </div>
                })
              }

            </div>

          </Sidebar.Item>

          <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="海鲜">

            <div className='con_cate'>

            {
                list.seafood.map((ele, index) => {
                  return <div key={index}>
                    <div className='con_cate_top'>
                      <img src={ele.img} />
                    </div>
                    <div>
                      {ele.title}
                    </div>
                  </div>
                })
              }

            </div>

          </Sidebar.Item>

          <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="肉禽蛋">

            <div className='con_cate'>

            {
                list.egg.map((ele, index) => {
                  return <div key={index}>
                    <div className='con_cate_top'>
                      <img src={ele.img} />
                    </div>
                    <div>
                      {ele.title}
                    </div>
                  </div>
                })
              }

            </div>

          </Sidebar.Item>
        </Sidebar>

      </div>



    </div>
  )
}
